<template>
    <admin-view>
        <admin-section>
            <admin-card>
                <el-row>
                    <el-col :span="16">
                        <div class="table">
                            <h4>基本信息</h4>
                            <div class="editable">
                                <el-form
                                        label-position="right"
                                        label-width="94px"
                                        size="medium"
                                        :model="club"
                                        :rules="rules"
                                        ref="editor"
                                >
                                    <el-form-item
                                            label="关联管理员"
                                            prop="uid">
                                        <admin-search-edit
                                                :name="club.user_name"
                                                :avatar="club.user_avatar"
                                                :id="club.uid"
                                                :type="1"
                                                :editable="false"
                                        ></admin-search-edit>
                                    </el-form-item>
                                    <el-form-item
                                            v-if="club.club_id.length === 0"
                                            label="粉丝站"
                                            prop="club_name">
                                        <el-input
                                                v-model="club.club_name"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                            v-if="club.club_id.length === 0"
                                            label="站子头像"
                                            prop="club_icon">
                                        <div class="avatar">
                                            <img v-img :src="club.club_icon" />
                                        </div>

                                    </el-form-item>
                                    <el-form-item
                                            v-if="club.club_id.length !== 0"
                                            label="粉丝站"
                                            prop="club_id">
                                        <admin-search-edit
                                                :id="club.club_id"
                                                :avatar="club.club_icon"
                                                :name="club.club_name"
                                                :type="3"
                                                :editable="false"
                                                @change="onStarSelect"></admin-search-edit>
                                    </el-form-item>
                                    <el-form-item
                                            label="关联明星"
                                            prop="star_id">
                                        <admin-search-edit
                                                v-if="club.star_id.length !==0"
                                            :id="club.star_id"
                                                :avatar="club.star_avatar"
                                                :name="club.star_name"
                                            :type="2"
                                            :editable="true"
                                            @change="onStarSelect">
                                        </admin-search-edit>
                                        <admin-search-edit
                                                v-else
                                                :type="2"
                                                :editable="true"
                                                @change="onStarSelect"></admin-search-edit>
                                    </el-form-item>
                                    <el-form-item
                                            label="联系电话"
                                            prop="phone">
                                        <el-input
                                                v-model="club.phone"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                            label="QQ"
                                            prop="qq">
                                        <el-input
                                                v-model="club.qq"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                            label="微信"
                                            prop="wx">
                                        <el-input
                                                v-model="club.wx"
                                        ></el-input>
                                    </el-form-item>
                                    <el-form-item
                                            label="微博"
                                            prop="club_weibo">
                                        <el-input
                                                v-model="club.club_weibo"
                                        ></el-input>
                                    </el-form-item>

                                    <el-form-item>
                                        <el-button
                                                @click="onSubmit"
                                                type="success"
                                                :loading="loading">通过
                                        </el-button>
                                        <el-button
                                                @click="onCancel"
                                                type="danger"
                                                :loading="loading">拒绝
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8"
                    >
                        <div class="card">
                            <h4>身份信息</h4>
                            <el-form
                                    label-position="top"
                                    size="medium"
                            >
                                <el-form-item
                                        label="身份证名称"
                                >
                                    {{club.real_name}}
                                </el-form-item>
                                <el-form-item
                                        label="身份证正面"
                                >
                                    <div class="card-img">
                                        <img v-img :src="club.front_url" />
                                    </div>

                                </el-form-item>
                                <el-form-item
                                        label="身份证反面"
                                >
                                    <div class="card-img">
                                        <img v-img :src="club.back_url" />
                                    </div>

                                </el-form-item>
                            </el-form>
                        </div>

                    </el-col>
                </el-row>
            </admin-card>
        </admin-section>
    </admin-view>
</template>

<script lang="ts">

    import {AdminView,AdminCard,AdminLabel,AdminSection} from '@/views/layout'
    import {Vue,Component} from 'vue-property-decorator'
    import {Api} from '@/api/stars'
    import Filter from '@/libs/filter'
    import AdminSearchEdit from '@/views/controls/AdminSearchEdit.vue'


    @Component({
        name:"AdminClubApplyView",
        components: {
            AdminView,
            AdminCard,
            AdminSection,
            AdminSearchEdit
        },
        filters: Filter
    })
    export default class AdminClubApplyView extends Vue{

        status:any = "全部";
        applyStatus = [
            "未提交",
            "待审核",
            "审核通过",
            "审核拒绝",
            "不存在",
        ];

        clubs:Api.Stars.GetClubApplyListResponse = {
            items :[],
            total:0,
        };

        page:number = 0;


        club:Api.Stars.GetClubApplyResponse = {
            status:0,
            club_name:"",
            club_icon:"",
            club_id:"",
            name:"",
            phone:"",
            qq:"",
            wx:"",
            club_weibo:"",
            front:"",
            back:"",
            real_name:"",
            user_name:"",
            user_avatar:"",
            uid:"",
            star_id:"",
            front_url:"",
            back_url:"",
            star_name:"",
            star_avatar:"",
        };

        loading:boolean = false;
        rules = {};
        loadRules() {

            this.rules = {
                phone: [{
                    required:true, message:"请填写联系手机"
                }],
                qq:[{
                    required:false
                }],
                wx:[{
                    required:false
                }],
                club_weibo:[{
                    required:true,message:"请填写粉丝站微博"
                }],
                star_id: [{
                    required:true, message:"请选择关联明星"
                }],
                club_name:[{required:true, message:"请填写粉丝站名称"}],
                uid: [{required:true,message:"请选择粉丝站管理员"}]
            };
        }




        loadView() {

            var id:any = this.$route.params['uid'];

            console.log("id",id)

            Api.Stars.GetClubApply({uid:id})
                .then((ack) => {
                    console.log(ack);

                    this.club = ack;
                    this.loadRules();
                })
        }

        onStarSelect(value) {
            this.club.star_id = value.id
        }


        onStatusChange() {
            this.loadView()
        }

        onSubmit() {
            let editor:any = this.$refs['editor'];

            editor.validate((valid:boolean) => {

                if(valid){

                    /*
                    uid:string
            club_id:string
            club_name:string
            club_icon:string
            club_weibo:string
            real_name:string
            phone:string
            qq:string
            wx:string
            front:string
            back:string
            star_id:string
                     */
                    let c = this.club;

                    let ask: Api.Stars.SetClubApplyRequest = {
                        uid:c.uid,
                        club_id:c.club_id,
                        club_name:c.club_name,
                        club_icon:c.club_icon,
                        club_weibo:c.club_weibo,
                        real_name:c.real_name,
                        phone:c.phone,
                        qq:c.qq,
                        wx:c.wx,
                        front:c.front,
                        back:c.back,
                        star_id:c.star_id,
                    };


                    this.loading = true;
                    Api.Stars.SetClubApply(ask)
                        .then((ack) => {
                            this.loading = false;
                            this.$message({
                                type:"success",
                                message:`提交成功.`
                            });

                            this.$router.push({
                                path:'/apply/club'
                            })

                        })
                        .catch(()=>{
                            this.loading = false;
                         })
                }
            })
        }

        onCancel() {

            Api.Stars.RefuseClubApply({
                uid:this.club.uid,
            }).then((ack) => {
                this.$message({
                    type:"success",
                    message:`提交成功.`
                });

                this.$router.push({
                    path:'/apply/club'
                })
            });
        }
        mounted() {
            this.loadView()
        }
    }


</script>

<style lang="scss" scoped>

    .table {
        padding: 10px;
    }

    .foot {
        padding-top: 10px;
    }

    .card {
        padding: 10px;
        border-left: 1px solid #E4E7ED;
    }

    .card-img {
        border: 1px solid #E4E7ED;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            height: 100%;
        }
    }

    .avatar {

        padding-top: 2px;
        padding-bottom: 2px;
        padding-right: 4px;
        img {
            position: relative;
            display: inline-block;
            width:36px;
            height:36px;
            /*圆形显示*/
            border-radius: 50%;
            /*圆形显示*/
            background: rgba(255,255,255,0.1);
            vertical-align: center;
        }
    }
</style>